<template>
  <div class="dashboard-container">
  	<el-row :gutter="20">
  		<el-col :span="6">
		    <el-card shadow="always">
		       总会员数：<el-tag type="success">100000</el-tag>
		    </el-card>
  		</el-col>
  		<el-col :span="6">
		    <el-card shadow="always">
		       总机构数：<el-tag type="success">5000</el-tag>
		    </el-card>
  		</el-col>
  		<el-col :span="6">
		    <el-card shadow="always">
		       总活动数：<el-tag type="success">3000000</el-tag>
		    </el-card>
  		</el-col>
  		<el-col :span="6">
		    <el-card shadow="always">
		       总附件数：<el-tag type="success">5600000</el-tag>
		    </el-card>
  		</el-col>
  	</el-row>
  	<div style="margin-top:10px;"></div>
  	 <el-row>
  	 	<el-col :span="8">
  	 <div id="drawmain1" style="width: 100%;height:200px;">

  	 </div>
  	 	</el-col>
  	 	<el-col :span="8">
  	 <div id="drawmain2" style="width: 100%;height:200px;">

  	 </div>
  	 	</el-col>
  	 	<el-col :span="8">
  	 <div id="drawmain3" style="width: 100%;height:200px;">

  	 </div>
  	 	</el-col>
  	 </el-row>
  	 <el-row :gutter="20">
  	 	<el-col :span="12">
  	 <div id="drawmain4" style="width: 100%;height:200px;">

  	 </div>
  	 	</el-col>
  	 	<el-col :span="12">
  	 <div id="drawmain5" style="width: 100%;height:200px;">

  	 </div>
  	 	</el-col>
  	 </el-row>
  	<div style="margin-top:10px;"></div>
<el-row>
	<el-col :span="12">
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span style="color:#67C23A">最新活动</span>
    <el-button style="float: right; padding: 3px 0" type="text">刷新</el-button>
  </div>
  <div>
<el-table
      :v-loading="false"
      :data="mostNewActivityList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="开始日期" width="120">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</el-card>
	</el-col>
	<el-col :span="12">

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span style="color:#F56C6C">热门活动</span>
    <el-button style="float: right; padding: 3px 0" type="text">刷新</el-button>
  </div>
  <div>
<el-table
      :v-loading="false"
      :data="mostHotActivityList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="开始日期" width="120">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</el-card>
	</el-col>
</el-row>
 
  </div>
</template>

<script>
	import * as echarts from 'echarts';
import { mapGetters } from 'vuex'

import { getList } from '@/api/activity-list'
import OrganizationSearch from '@/components/OrganizationSearch'
export default {
  name: 'Dashboard',
  components:{
  	OrganizationSearch
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        notstart: 'success',
        playing: 'gray',
        end: 'danger'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        notstart: '未开始',
        playing: '进行中',
        end: '已结束'
      }
      return statusMap[status]
    },
  },
  data() {
    return {
    	searchFormData:{
    		title:"",
    		school:"",
    		province:"",
    		city:"",
    		county:"",
    		searchdate:[],
    		status:""
    	},
    	searchFormDataRules:{},
      list: [
       {"title":"","created_at":"","status":""}
      ],
      mostNewActivityList: [
       {"title":"最新活动1","departTitle":"湖南省-湘西-吉首市-吉首市第一小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"最新活动2","departTitle":"湖南省-湘西-吉首市-吉首市第一小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"最新活动3","departTitle":"湖南省-湘西-吉首市-吉首市第一小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"最新活动4","departTitle":"湖南省-湘西-吉首市-吉首市第一小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"最新活动5","departTitle":"湖南省-湘西-吉首市-吉首市第一小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"最新活动6","departTitle":"湖南省-湘西-吉首市-吉首市第一小学","status":"playing","created_at":"2024-11-01 12:00:00"}
      ],
      mostHotActivityList: [
       {"title":"热门活动1","departTitle":"湖南省-湘西-吉首市-吉首市第六小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"热门活动2","departTitle":"湖南省-湘西-吉首市-吉首市第六小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"热门活动3","departTitle":"湖南省-湘西-吉首市-吉首市第六小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"热门活动4","departTitle":"湖南省-湘西-吉首市-吉首市第六小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"热门活动5","departTitle":"湖南省-湘西-吉首市-吉首市第六小学","status":"playing","created_at":"2024-11-01 12:00:00"},
       {"title":"热门活动6","departTitle":"湖南省-湘西-吉首市-吉首市第六小学","status":"playing","created_at":"2024-11-01 12:00:00"}
      ],
      listLoading: true
    }
  },
  created() {
    //this.fetchData()
  },
  mounted(){

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('drawmain1'));
// 绘制图表
myChart1.setOption({
    title: {
        text: '会员增长'
    },
    tooltip: {},
    xAxis: {
    type: 'category',
    data: ['4', '5', '6', '7', '8', '9', '10']
  },
    yAxis:{
    type: 'value'
  },
    series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});


// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('drawmain2'));
// 绘制图表
myChart2.setOption({
    title: {
        text: '机构增长'
    },
    tooltip: {},
    xAxis: {
    type: 'category',
    data: ['4', '5', '6', '7', '8', '9', '10']
  },
    yAxis:{
    type: 'value'
  },
    series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});


// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('drawmain3'));
// 绘制图表
myChart3.setOption({
    title: {
        text: '活动增长'
    },
    tooltip: {},
    xAxis: {
    type: 'category',
    data: ['4', '5', '6', '7', '8', '9', '10']
  },
    yAxis:{
    type: 'value'
  },
    series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});

// 基于准备好的dom，初始化echarts实例
var myChart4 = echarts.init(document.getElementById('drawmain4'));
// 绘制图表
myChart4.setOption({
    title: {
        text: '附件增长'
    },
  xAxis: {
    type: 'category',
    data: ['4', '5', '6', '7', '8', '9', '10']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        {value:"100",label:{show:true}},
      {value:"200",label:{show:true}},
      {value:"300",label:{show:true}},
      {value:"400",label:{show:true}},
      {value:"500",label:{show:true}},
      {value:"600",label:{show:true}},
      {value:"700",label:{show:true}},
      ],
      type: 'bar'
    }
  ]
});
// 基于准备好的dom，初始化echarts实例
var myChart5 = echarts.init(document.getElementById('drawmain5'));
// 绘制图表
var option = {
    title: {
        text: '会员分布'
    },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    right: '20px',
    orient:"vertical",
    align:"left"
  },
  series: [
    {
      name: 'Area Distribute',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '吉首市' },
        { value: 735, name: '泸溪县' },
        { value: 580, name: '凤凰县' },
        { value: 484, name: '保靖县' },
        { value: 300, name: '花垣县' },
        { value: 200, name: '古丈县' },
        { value: 500, name: '永顺县' },
        { value: 200, name: '龙山县' },
        { value: 100, name: '高新区' }
      ]
    }
  ]
};
myChart5.setOption(option);
  window.addEventListener('resize', function() {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
    myChart4.resize();
  });
 },
  methods: {
  	searchActivityList(){
  		console.log(this.searchform);
  	},
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
			onSubmitQuery(obj){
				console.log("onSubmitQuery",obj)
			}
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
